<template>
  <div class="big-class">
    <!-- left start -->
    <div class="video-left">
      <div class="left-bar" @click="showLeft" :style="{ left: leftBar ? '260px' : '0' }">
        <span class="bar-switch" :class="{ 'right-icons': !leftBar, 'left-icons': leftBar }"></span>
      </div>
      <div class="widget-video">
        <div class="main-video">
          <div id="videoInteractions"></div>
          <div id="audioInteractions" style="display: none"></div>
          <div
            class="call-box call-box-small"
            id="videoInteraction"
            style="display: none; z-index: 99"
          >
            <div class="call-tit">视频通话申请中...</div>
            <div class="btn-toggle"></div>
            <video id="interactionLocalVideo" style="height: 100%; width: 100%" autoplay></video>
          </div>
          <!-- 直播视频模块 -->
          <div id="livePlayer" style="height: 100%"></div>
        </div>
      </div>
      <LiveQuestionAnswer></LiveQuestionAnswer>
    </div>
    <!-- left end -->
    <!-- middle start -->
    <div
      class="video-middle"
      :style="{
        left: leftBar ? '270px' : '10px',
        right: rightBar ? '270px' : '10px'
      }"
    >
      <div class="video-m-top" id="doc-main" :data-module="dataModule">
        <!-- 直播文档模块 -->
        <LiveDocument></LiveDocument>
      </div>
      <LiveControls></LiveControls>
    </div>
    <!-- middle end -->

    <!-- right start -->
    <div class="video-right live-right">
      <div class="right-bar" @click="showRight" :style="{ right: rightBar ? '260px' : '0' }">
        <span
          class="bar-switch"
          :class="{
            'left-icons': !rightBar,
            'right-icons': rightBar
          }"
        ></span>
      </div>
      <LiveChat></LiveChat>
    </div>

    <!-- 选择网络 -->
    <LiveNetwork></LiveNetwork>

    <!-- 输入提示 -->
    <div class="input-tips" id="input-tips">
      <i></i>
      <p></p>
      <div class="input-tips-cur"></div>
    </div>

    <!-- 抽奖 -->
    <LiveLottery></LiveLottery>

    <!-- 问答 -->
    <LiveVote></LiveVote>

    <!-- 签到 -->
    <LiveSign></LiveSign>

    <a id="clipImage_down" download="clip-image.png"></a>
  </div>
</template>

<script>
import './common/liveHDScene' //直播核心对象
import Utils from './common/utils' //公共方法库
import LiveChat from './components/live/chat/chat'
import LiveDocument from './components/live/document/document'
import LiveControls from './components/live/controls/controls'
import LiveQuestionAnswer from './components/live/questionAnswer/questionAnswer'
import LiveVote from './components/live/vote/vote'
import LiveLottery from './components/live/lottery/lottery'
import LiveSign from './components/live/sign/sign'
import LiveNetwork from './components/live/network/network'
import { mapState } from 'vuex'
export default {
  components: {
    LiveChat,
    LiveDocument,
    LiveControls,
    LiveQuestionAnswer,
    LiveVote,
    LiveLottery,
    LiveSign,
    LiveNetwork
  },
  data() {
    return {
      HDScene: window.liveHDScene,
      dataModule: 1,
      leftBar: true,
      rightBar: true
    }
  },
  computed: {
    ...mapState({
      getCurrentPlayItem: state => state.course.currentPlayItem,
      userInfo: state => state.user.info,
      token: state => state.user.token
    })
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      let ccLive = this.getCurrentPlayItem.section_live
      let user = this.userInfo
      let token = this.token
      let params = {
        userid: ccLive.cc_userid,
        roomid: ccLive.cc_room_id,
        viewertoken: ccLive.authtype === 0 ? `${token.ak}:${token.sk}` : '',
        viewername: user.nick_name
      }
      /* let params = {
        roomid: 'BBC10038C0C26ECD9C33DC5901307461',
        userid: '56761A7379431808',
        autoLogin: true,
        viewername: 'vue',
        viewertoken: '524550'
      } */
      this.HDScene.login({
        userId: params.userid, //用户id
        roomId: params.roomid, //直播间id
        viewerToken: params.viewertoken, //密码
        viewerName: params.viewername, //用户名称
        fastMode: true, //是否为急速文档
        viewercustomua: 'web',
        success(result) {
          Utils.log('登录成功', result)
        },
        fail(error) {
          Utils.log('登录失败', error)
        }
      })

      // 踢出
      this.HDScene.onKickOut({
        callback: () => {
          this.$message.info('断开链接')
          this.$router.go(-1)
        }
      })
    },
    showLeft() {
      // 判断当前主要内容
      this.leftBar = !this.leftBar
    },
    showRight() {
      this.rightBar = !this.rightBar
    }
  }
}
</script>

<style lang="scss">
@import './styles/video-main.css';
</style>
